<template>
	<app-layout>
		<view class="app-pt-index">
			<view class="app-list safe-area-inset-bottom" v-if="goods_list.length>0">
				<view class="bd-item dir-left-nowrap" :class="{'bd-item-border': index !== goods_list.length - 1}"
					v-for="(item, index) in goods_list" :key="index">
					<view class="pt-shop-item" v-if="item.isab == 0">
						<view class="pt-title" v-if="item.goods_detail.pintuanGoods.title != null">
							{{item.goods_detail.pintuanGoods.title}}
						</view>
						<view class="pt-goods">
							<view class="pt-goods-item" v-for="(items,indexs) in 2" :key="indexs" v-if="indexs < 2">
								<view class="ptimage">
									<image class="image" :src="item.cover_pic"></image>
									<!-- <view class="no-goods" v-if="indexs < 2">
										<view class="no-title">
											已团
										</view>
									</view> -->
								</view>
							</view>
						</view>
						<view>
							<view class="bd-name u-line-2">{{item.name}}</view>
						</view>
						<view class="price dir-top-nowrap main-right">
							<!-- <view class="member-price" v-if="item.is_level === 1 && item.level_price != -1">
								<app-member-price :price="item.level_price"></app-member-price>
							</view> -->
							<view class="app-price dir-left-nowrap cross-bottom">
								<text class="app-now-price" :class="themeObject.color">定金：</text>
								<text class="app-symbol app-now-price" :class="themeObject.color"
									v-if="item.price > 0">{{item.price}}</text>
								<text class="app-now-price" :class="themeObject.color" v-else>免费</text>
							</view>
						</view>
						<!-- <view class="pt-goods-desc line2" v-if="item.subtitle != ''">
							{{item.subtitle}}
						</view> -->
						<!-- <view class="pt-goods-desc line2">
							<view style="background: #DCDCDC;color: #fff" class="app-button">已售罄</view>
						</view> -->
					</view>
					<view class="pt-shop-item" v-if="item.isab == 1">
						<view class="pt-title" v-if="item.goods_detail.pintuanGoods.title != null">
							{{item.goods_detail.pintuanGoods.title}}
						</view>
						<view class="pt-goods">
							<view class="pt-goods-item" v-for="(items,indexs) in item.goods_detail.groups[0].attr"
								:key="indexs" v-if="indexs < 2">
								<view class="ptimage">
									<image class="image" :src="items.pic_url || item.cover_pic"></image>
									<!-- <view class="no-goods">
										<view class="no-title">
											已团
										</view>
									</view> -->
								</view>
								<view class="name u-line-1">{{items.attr_list[0].attr_name}}</view>
								<view class="price u-line-1">定金￥{{items.price}}</view>
							</view>
						</view>
						<view class="pt-goods-desc line2">
							{{item.name}}
						</view>
						<view class="pt-goods-desc line2">
							AB拼团
						</view>
						<!-- <view class="pt-goods-desc line2">
							<view style="background: #DCDCDC;color: #fff" class="app-button">已售罄</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="nopt" v-else>
				等待，有惊喜哦
			</view>
			<!-- 返回顶部 -->
			<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
				<image @click="backTop" class="quick-btn" src="/static/image/icon/back-top.png"></image>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		name: 'index',
		data() {
			return {
				page: 1,
				page_count: 1,
				goods_list: [],
				title: '',
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '历史拼团',
			});
		},
		onLoad(option) {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onShow() {
			this.requestList(0)
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++;
				this.requestList(1);
			}
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			async requestList(status) {
				this.$showLoading();
				const r = await this.$request({
					url: this.$api.pt.goods,
					data: {
						page: this.page,
						limit: 20,
						history: 1
					}
				});
				// console.log(r);
				if (r.code === 0) {
					this.$hideLoading();
					let {
						pagination,
						list
					} = r.data;
					this.goods_list = 1 === status ? this.goods_list.concat(list) : list;
					this.page_count = pagination.page_count;
				} else {
					this.$hideLoading();
				}
			},
			route_go(data) {
				uni.navigateTo({
					url: `/plugins/pt/goods/goods?goods_id=${data.id}`
				});
			}
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapState({
				themeObject: function(state) {
					let theme = state.mallConfig.mall.setting.theme_color;
					return {
						back: theme + '-m-back ' + theme,
						theme: theme,
						color: theme + '-m-text ' + theme,
						sBack: theme + '-s-back ' + theme
					}
				}
			})
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/plugins/pt/hisgoods/hisgoods',
				title: '历史拼团',
			});
		},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return this.$shareTimeline({
				title: '历史拼团',
				query: {}
			});
		},
		// #endif
	}
</script>

<style scoped lang="scss">
	.app-pt-index {
		background-color: #f7f7f7;
		min-height: 100vh;

		.app-list {
			// margin-top: #{20rpx};
		}
	}

	.bd-item-border {
		border-bottom: #{1rpx} solid #e2e2e2;
	}

	.bd-name {
		font-size: #{28rpx};
		color: #353535;
		margin-top: #{5rpx};
	}

	.bd-item {
		padding: #{24rpx 24rpx 14rpx 24rpx};
		background-color: #ffffff;
		position: relative;
	}

	.member-price {
		margin-top: 5upx;
	}

	// ab拼团
	.pt-shop-item {
		width: 686rpx;
		// padding: 32rpx;
		margin: 32rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.pt-shop-item .item {
		width: 100%;
		height: 100%;
	}

	.pt-title {
		font-size: 32rpx;
		padding: 20rpx 0;
		font-weight: 600;
	}

	.pt-goods {
		display: flex;
		justify-content: space-between;
	}

	.pt-goods-item {
		// width: 296rpx;
		// height: 296rpx;
		width: 324rpx;
		// height: 324rpx;
		// position: relative;
		border-radius: 16rpx;
		overflow: hidden;

		.ptimage {
			width: 324rpx;
			height: 324rpx;
			position: relative;
		}

		.no-goods {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 auto;

			.no-title {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				background-color: rgba($color: #000000, $alpha: 0.5);
				backdrop-filter: blur(9px);
				font-size: 36rpx;
				text-align: center;
				line-height: 124rpx;
				color: #FFFFFF;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.pt-goods-item .image {
		width: 324rpx;
		height: 324rpx;
		/* position: absolute;
		top: 0;
		left: 0; */
	}

	.pt-goods-item .name {
		width: 100%;
		height: 62rpx;
		line-height: 62rpx;
		// text-align: center;
		font-size: 24rpx;
		// background: rgba(0, 0, 0, 0.4);
		// color: #fff;
		/* position: absolute;
		bottom: 0;
		left: 0; */
	}

	.pt-goods-item .price {
		width: 100%;
		height: 52rpx;
		// line-height: 62rpx;
		// text-align: center;
		font-size: 28rpx;
		// background: rgba(0, 0, 0, 0.4);
		// color: #fff;
		/* position: absolute;
		bottom: 0;
		left: 0; */
	}

	.app-button {
		font-size: #{26rpx};
		color: #ffffff;
		width: #{180rpx};
		height: #{64rpx};
		line-height: #{64rpx};
		text-align: center;
		/* #ifndef MP-TOUTIAO */
		padding: 0 #{49rpx};
		/* #endif */
		border-radius: #{32rpx};
	}

	.default-button {
		background: linear-gradient(140deg, #ffa360, #ff5c5c);
	}

	.pt-goods-desc {
		padding: 26rpx 0 0;
		color: #333333;
		font-size: 24rpx;
	}

	// 拼团
	.price {
		/* width: #{458-180rpx};
		height: #{105rpx}; */
		width: 100%;
		height: 52rpx;
		// line-height: 62rpx;
		font-size: 28rpx;
	}

	.app-now-price {
		font-size: #{30rpx};
		margin-right: #{12rpx};
	}

	.app-symbol:before {
		content: '￥';
		font-size: #{30rpx};
	}

	.nopt {
		text-align: center;
		line-height: 476rpx;
		font-size: 36rpx;
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
